<template>
    <view>
        <view class="coupon-container">
            <!-- 可用 -->
            <view class="coupon-item-wrap" v-if="item.usable == 0" v-for="(item, index) in couponList" :key="index">
                <view class="coupon-money-wrap">
                    <text class="coupon-money-sign">¥</text>
                    <text class="coupon-money-sign coupon-money-text">{{ item.deduction }}</text>
                </view>

                <view class="coupon-text-wrap">
                    <view>
                        <text class="coupon-text-name">{{ item.content }}</text>
                        <text class="coupon-text-type">现金券</text>
                    </view>
                    <view>
                        <text class="coupon-text-desc">有效期内｜所有发型师通用发型师</text>
                    </view>
                    <view>
                        <text class="coupon-text-desc">有效期至 {{ item.usedTime }}</text>
                    </view>
                </view>

                <view class="coupon-select-wrap">
                    <van-checkbox :value="item.checked" checked-color="#FF8722" @change="onChange($event, { index })" :data-index="index"></van-checkbox>
                </view>
            </view>
            <!-- 不可用 -->
            <view class="coupon-desc-text">以下红包不满足使用条件</view>
            <view class="coupon-useness-wrap" v-if="item.usable == 1" v-for="(item, index) in couponList" :key="index">
                <view class="coupon-item-wrap">
                    <view class="coupon-money-wrap">
                        <text class="coupon-money-sign">¥</text>
                        <text class="coupon-money-sign coupon-money-text">{{ item.deduction }}</text>
                    </view>
                    <view class="coupon-text-wrap">
                        <view>
                            <text class="coupon-text-name">{{ item.content }}</text>
                            <text class="coupon-text-type">现金券</text>
                        </view>
                        <view>
                            <text class="coupon-text-desc">有效期内｜所有发型师通用发型师</text>
                        </view>
                        <view>
                            <text class="coupon-text-desc">有效期至 {{ item.usedTime }}</text>
                        </view>
                    </view>
                    <view class="coupon-select-wrap">
                        <van-checkbox :value="checked" checked-color="#FF8722" @change="onChange"></van-checkbox>
                    </view>
                </view>

                <view class="coupon-model-wrap"></view>
            </view>
        </view>
        <view style="height: 50rpx"></view>
    </view>
</template>

<script>
const app = getApp();

const _request = require('../../utils/request.js');

export default {
    data() {
        return {
            couponList: [1, 2, 3],

            //券列表
            //选中券
            cardinfo: '',

            checked: false
        };
    },
    onLoad: function (options) {
        this.setData({
            cardinfo: JSON.parse(options.cardinfo)
        });
        this.loadData(); //获取券列表
    },
    onUnload: function () {
        var that = this;
        var pages = getCurrentPages();
        var prevPage = pages[pages.length - 2];
        prevPage.setData({
            cardinfo: that.cardinfo
        });
    },
    methods: {
        loadData() {
            _request.get('/cashCoupon/getUserCashCouponByUserId', {}, app.globalData.mallType).then((res) => {
                if (res.data.code === 200) {
                    res.data.data.map((item) => {
                        item.checked = false;

                        if (this.cardinfo && this.cardinfo.id == item.id) {
                            item.checked = true;
                        }
                    });
                    this.setData({
                        couponList: res.data.data
                    });
                }
            });
        },

        onChange(e, _dataset) {
            /* ---处理dataset begin--- */
            this.datasetHandle(e, _dataset);
            /* ---处理dataset end--- */
            var indexs = e.currentTarget.dataset.index;
            var _list = this.couponList;
            var _info = '';

            _list.map((item, index) => {
                if (indexs == index) {
                    item.checked = true;
                    _info = item;
                } else {
                    item.checked = false;
                }
            });

            this.setData({
                couponList: _list,
                cardinfo: _info
            });
        }
    }
};
</script>
<style>
.coupon-container {
    background-color: #fbfbfb;
}
.coupon-item-wrap {
    width: 96%;
    margin: 0 auto;
    background-color: #fff;
    color: #000;
    height: 150rpx;
}
.coupon-money-wrap {
    background-image: linear-gradient(#ffbc47, #ff8722);
    width: 150rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.coupon-money-wrap,
.coupon-text-wrap,
.coupon-select-wrap {
    float: left;
}
.coupon-money-sign {
    color: #fff;
    line-height: 150rpx;
    font-size: 50rpx;
    text-align: center;
}
.coupon-money-text {
    font-size: 80rpx;
}
.coupon-select-wrap {
    padding-top: 60rpx;
    padding-left: 10rpx;
    box-sizing: border-box;
}
.coupon-text-wrap {
    width: 65%;
    padding-left: 30rpx;
}
.coupon-text-name {
    font-size: 35rpx;
    font-weight: 700;
}
.coupon-text-type {
    font-size: 25rpx;
    background-color: #ff8722;
    border-radius: 40rpx;
    color: #fff;
    letter-spacing: 3rpx;
    margin-left: 20rpx;
    padding: 5rpx 15rpx;
}
.coupon-text-desc {
    color: #999999;
    font-size: 25rpx;
    letter-spacing: 3rpx;
}

.coupon-useness-wrap {
    position: relative;
}

.coupon-model-wrap {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.5;
    background-color: #eeeeee;
    z-index: 1000;
    height: 150rpx;
}

.coupon-item-wrap + .coupon-item-wrap {
    margin-top: 30rpx;
}
.coupon-useness-wrap + .coupon-useness-wrap {
    margin-top: 30rpx;
}
.coupon-desc-text {
    margin: 20rpx;
}
</style>
